<template>
    <div>
        <div class="title">
            <div>提现记录</div>
            <div class="returnClass" @click="$emit('returnClick')">
                        <img src="../../../../../static/engineering5188/common/return.png" alt=""/>
                        返回
                    </div>
        </div>
        <div v-if="list.length > 0">
            <div v-for="(item, index) in list" :key="index" class="list-item">

                <div>
                    <p class="itemText">提现</p>
                    <p class="itemSj">{{ item.created_at }}</p>
                </div>

                <div class="itemNum">
                    -￥{{ item.money }}
                </div>

            </div>
        </div>

        <div class="zanwuSj" v-else>
            暂无数据
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: "WithdrawalRecord",
    data() {
        return {
            list: []
        }
    },
    computed: {
        ...mapState([
            "userInfo",
        ]),
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.$httpApi("/api/txList", {
                token: this.userInfo.token,
                page: 1,
                limit: 10
            }, "get").then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.list = res.data.list
                } else {
                    alertErr(res.msg);
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.zanwuSj {
    text-align: center;
    margin-top: 200px;
}

.itemNum {

    font-family: DIN Alternate, DIN Alternate;
    font-weight: bold;
    font-size: 20px;
    color: #FF0000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.itemSj {

    font-family: Arial, Arial;
    font-weight: 400;
    font-size: 14px;
    color: #747474;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 10px;
}

.itemText {

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #2C2C2C;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.list-item {
    width: 1150px;
    padding: 21px 0;
    border-bottom: 1px solid #F1F1F1;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title {
    height: 56px;
    background: #FFFFFF;
    line-height: 56px;
    border-radius: 0px 0px 0px 0px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    border-bottom: 4px solid #F5F5F5;
    padding-left: 32px;
    display: flex;
    justify-content: space-between;
    padding-right: 32px;
}
.returnClass{
    img{
        width: 12px;
        height: 12px;
        margin-right: 5px;
    }
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 80px;
}
.flex-center{
    display: flex;
    align-items: center;
}
</style>